<template>
  <div class="modal" v-show="show">
    <div class="container">
      <div class="header">
	<button @click="cancel">退出</button>
      </div>

      <div class="content">
	<slot/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
 const props = defineProps({
   show: Boolean
 })

 const emit = defineEmits(['update:show'])
 function cancel() {
   emit('update:show', false)
 }
</script>
<style lang="scss" scoped>
 div.modal {
   background: rgba(0, 0, 0, 0.1);
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;

   div.container {
     margin: auto;
     z-index: 100;
     background: white;
     width: 70%;
     height: 60%;

     position: relative;

     div.header {
       display: flex;
       justify-content: flex-end;
     }

     div.content {
       margin-top: 20px;
     }
   }
 }
</style>